<template>
  <mt-popup v-model="popupVisible" position="right" :modal="false" class="fxActivity-details">
    <div class="page fxActivity-details">
      <div class="scroll-view">
        <customHeader middleTitle="门店活动详情" @leftCallBack="popupHide"></customHeader>
        <fxActivityProtocol ref="fxActivityProtocol"></fxActivityProtocol>
        <div class="page-body">
          <div class="top">
            <div class="shop-name">{{shopName(data)}}</div>
            <div class="status" :class="data.statusFormate['color']">{{data.statusFormate['text']}}</div>
            <ul class="top-ul">
              <li>
                <span>门店活动ID</span>
                <div>{{data.marketingId}}</div>
              </li>
              <li v-if="data.status==41">
                <span>关停时间</span>
                <div>{{data.closeTime}}</div>
              </li>
              <li v-if="data.status==40">
                <span>过期时间</span>
                <div>{{data.closeTime}}</div>
              </li>
              <li v-if="data.status==43">
                <span>失效时间</span>
                <div>{{data.closeTime}}</div>
              </li>
              <li v-if="data.status==11||data.status==13||data.status==14||data.status==21">
                <span>驳回时间</span>
                <div>{{data.rejectTime}}</div>
              </li>
              <li
                v-if="data.status==20||data.status==21||data.status==30||data.status==31||data.status==32||data.status==34||data.status==35||data.status==41||data.status==42"
              >
                <span>签约支付方式</span>
                <div>{{payTypeFormate(data.marketPaytype)}}</div>
              </li>
              <li
                v-if="data.status==20||data.status==21||data.status==30||data.status==31||data.status==32||data.status==34||data.status==35||data.status==41||data.status==42"
              >
                <span v-if="data['aliProtocal']||data['wechatProtocal']">签署协议</span>
                <div>
                  <span
                    v-if="data['aliProtocal']||data['wechatProtocal']"
                    class="protocol-text"
                    @click="openProtocol()"
                  >《营销服务协议》</span>
                  <span
                    class="protocol-text"
                    v-if="data['aliProtocal']"
                    @click="linkToProtocol(data['aliProtocal'])"
                  >《{{data['aliProtocal']&&data['wechatProtocal']?'商户分账协议1':'商户分账协议'}}》</span>
                  <span
                    class="protocol-text"
                    v-if="data['wechatProtocal']"
                    @click="linkToProtocol(data['wechatProtocal'])"
                  >《{{data['aliProtocal']&&data['wechatProtocal']?'商户分账协议2':'商户分账协议'}}》</span>
                </div>
              </li>
              <li v-if="data.status==11||data.status==13||data.status==14||data.status==21">
                <span>驳回原因</span>
                <div>
                  <ul class="content-ul">
                    <li v-for="(item,index) in data.rejectReason" :key="index">•{{item}}</li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
          <div class="link-section" @click="linkToIntro">
            <span>返现营销介绍</span>
            <div>
              <i class="zhk-list_rarrow"></i>
            </div>
          </div>
          <div class="section-title">活动基本信息</div>
          <ul class="bottom">
            <li>
              <span>开始时间</span>
              <div>{{data.startTime}}</div>
            </li>
            <li>
              <span>结束时间</span>
              <div>{{data.endTime}}</div>
            </li>
            <li>
              <span>
                营销服务费比例
                <span class="sub-text">仅当拉新或复购时收取（即用户使用津贴支付时才会收取）</span>
              </span>
              <div>
                {{toPercent(data.marketingFeeRatio)}}
                 <div v-if="data.yzshopMarketingUpperboundExtModel['marketingFeeUpperboundValue']">封顶{{data.yzshopMarketingUpperboundExtModel.marketingFeeUpperboundValue}}元</div>
              </div>
            </li>
            <li>
              <span>软件服务费比例</span>
              <div>
                {{toPercent(data.softwareFeeRatio)}}
              <div v-if="data.yzshopMarketingUpperboundExtModel['softwareFeeUpperboundValue']">封顶{{data.yzshopMarketingUpperboundExtModel.softwareFeeUpperboundValue}}元</div>
              </div>
            </li>
          </ul>
          <ul class="bottom mt20">
            <li>
              <span>返现方式</span>
              <div>{{CommonUtil.marketTypeFormate(data.marketType)}}</div>
            </li>
            <li>
              <span>用户津贴比例</span>
              <div>
                {{data.marketType==4?`新会员返${toPercent(data.platformsServiceFeeRatio)},老会员返${toPercent(data.secondPlatformsServiceFeeRatio)}`:toPercent(data.platformsServiceFeeRatio)}}
               <div v-if="data.yzshopMarketingUpperboundExtModel['platformsServiceFeeUpperboundValue']">封顶{{data.yzshopMarketingUpperboundExtModel.platformsServiceFeeUpperboundValue}}元</div>
              </div>
            </li>
          </ul>
          <ul class="bottom mt20" v-if="data.fragmentFeeUsed">
            <li>
              <span>特殊时段</span>
            </li>
            <li style="margin-top: -1.5rem;">
              <div>
                <ul v-for="(item,index) in data.yzShopMarketingFragmentFeeExtModels" :key="index" :class="{'mt20':index>0}">
                  <li>{{CommonUtil.weekFormate(item.weekSet)}}</li>
                  <li>{{CommonUtil.timeForamte(item.timeFragmeentList)}}</li>
                  <template  v-if="item.fragmentJoinMarkting==1">
                    <li>用户津贴比例：{{item.platformsServiceFeeRuleType==4?`新会员返${toPercent(item.platformsServiceFeeRatio.newMemberFeeRatio)},老会员返${toPercent(item.platformsServiceFeeRatio.oldMemberFeeRatio)}`:toPercent(item.platformsServiceFeeRatio.commonMemberFeeRatio)}}</li>
                    <li>营销服务费比例：{{toPercent(item.marketingFeeRatio.commonMemberFeeRatio)}}</li>
                  </template>
                  <template v-else>
                    <li>该时段不返不核</li>
                  </template>
                </ul>
              </div>
            </li>
          </ul>
          <div class="tip-msg">*以上所有费用均按收银实收比例计算</div>
        </div>
      </div>
    </div>
  </mt-popup>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import { Toast } from "mint-ui";
import jsBridge from "../../tools/jsBridge.js";
import fxActivityProtocol from "../fxActivitySigning/fxActivityProtocol";
import config from "../../base/profile/config.json";
export default {
  name: "fxActivityDetails",
  data() {
    return {
      CommonUtil:CommonUtil,
      popupVisible: false,
      data: {
        marketingId: "", //String活动ID
        status: "", //String活动状态
        mainShopName: "",//String主门店名称
        branchShopName: "",//String分门店名称
        shopId: "",//String门店id
        doorheadPhoto: "",//String门头照
        startTime: null,//Number1活动创建时间 13位时间戳
        endTime: null,//Number1活动结束时间 13位时间戳
        closeTime: null,//Number1活动关停时间 13位时间戳
        marketType:null,
        platformsServiceFeeRatio: "",//String平台服务费⽐例
        secondPlatformsServiceFeeRatio: "",//阶梯返现代表新会员
        marketingFeeRatio: "",//String营销服务费比例
        fragmentFeeUsed:null,
        yzshopMarketingUpperboundExtModel:{},
        statusFormate: { text: "", color: "" }
      }
    };
  },
  props: {
    detailsParam: {
      type: Object
    },
  },
  methods: {

    linkToIntro() {
      const url = config.fxyxActivityIntro + "?s=1";
      jsBridge.openWindow({
        needTitle: true,
        title: "返现营销介绍",
        url: url,
        target: "server",
      });
    },
    shopName(item) {
      let shopName = item.mainShopName;
      if (item.branchShopName) {
        shopName += "(" + item.branchShopName + ")";
      }
      return shopName;
    },
    //小数转百分比
    toPercent(rate) {
      if (rate) {
        return parseFloat((rate * 100).toPrecision(12)) + "%";
      } else {
        return rate;
      }
    },
    popupShow() {
      this.popupVisible = true;
    },
    popupHide() {
      if (this.$refs.fxActivityProtocol.popupVisible) {
        this.$refs.fxActivityProtocol.popupHide();
        return;
      }
      this.popupVisible = false;
    },
    openProtocol() {
      this.$refs.fxActivityProtocol.popupShow();
    },
    linkToProtocol(url) {
      if (!url) {
        Toast("未取到协议地址");
      } else {
        jsBridge.openWindow({
          needTitle: true,
          title: "商户分账协议",
          url: url,
          target: "server",
        });
      }
    },
    payTypeFormate(marketPaytype) {
      let v = "";
      let f = "、";//顿号
      for (let i in marketPaytype) {
        if (i == marketPaytype.length - 1) {
          f = "";
        } else {
          f = "、";
        }
        if (marketPaytype[i] == "01") {
          v = v + "支付宝" + f;
        } else if (marketPaytype[i] == "02") {
          v = v + "微信" + f;
        } else if (marketPaytype[i] == "03") {
          v = v + "云闪付" + f;
        }
      }
      return v;
    },
    statusFormate(status) {
      //color(色值):orange  grey blue
      let v = { text: "", color: "" };
      if (status == "10") {//内审中
        v = { text: "审核中", color: "blue" };
      } else if (status == "11") {//内审驳回
        v = { text: "审核驳回", color: "orange" };
      } else if (status == "12") {
        v = { text: "待商家确认", color: "blue" };
      } else if (status == "13") {
        v = { text: "商家驳回", color: "grey" };
      } else if (status == "14") {//撤回申请
        v = { text: "审核驳回", color: "orange" };
      } else if (status == "20") {//外审中
        v = { text: "审核中", color: "blue" };
      } else if (status == "21") {//外审驳回
        v = { text: "审核驳回", color: "orange" };
      } else if (status == "30") {
        v = { text: "未开始", color: "blue" };
      } else if (status == "31") {
        v = { text: "进⾏中", color: "blue" };
      } else if (status == "32") {//变更补贴审核中
        v = { text: "进⾏中", color: "" };
      } else if (status == "34") {
        v = { text: "变更补贴审核通过", color: "" };
      } else if (status == "35") {//变更补贴驳回
        v = { text: "审核驳回", color: "orange" };
      } else if (status == "40") {
        v = { text: "过期未确认", color: "grey" };
      } else if (status == "41") {
        v = { text: "已关停", color: "grey" };
      } else if (status == "42") {
        v = { text: "已结束", color: "grey" };
      } else if (status == "43") {
        v = { text: "已失效", color: "grey" };
      }
      return v;
    },
    loadData() {
      this.ajax({
        url: `/newapp/marketing/getShopDetail.do?shopId=${this.detailsParam.shopId}&marketingId=${this.detailsParam.marketingId ? this.detailsParam.marketingId : ""}`,
        type: "get",
        controlLoading: false,
      })
        .then(res => {
          if (res.success && res.resultObject) {
            res.resultObject.yzshopMarketingUpperboundExtModel=res.resultObject['yzshopMarketingUpperboundExtModel']||{};
            res.resultObject.yzShopMarketingFragmentFeeExtModels=res.resultObject['yzShopMarketingFragmentFeeExtModels']||{};
            this.data = res.resultObject;
            this.data.startTime = this.data.startTime ? CommonUtil.timestampToTime(this.data.startTime) : this.data.startTime;
            this.data.endTime = this.data.endTime ? CommonUtil.timestampToTime(this.data.endTime) : this.data.endTime;
            this.data.rejectTime = this.data.rejectTime ? CommonUtil.timestampToTime(this.data.rejectTime) : this.data.rejectTime;
            this.data.closeTime = this.data.closeTime ? CommonUtil.timestampToTime(this.data.closeTime) : this.data.closeTime;
            this.data.statusFormate = this.statusFormate(this.data.status);
          } else {
            Toast(res.msg);
          }
        })
        .catch(err => {

        });
    },
  },

  created() { },
  components: {
    customHeader,
    fxActivityProtocol
  },
  watch: {
    popupVisible(newV, oldV) {
      if (newV) {
        this.loadData();
      }
    }
  }
};
</script>
<style lang='scss' scoped>
@import "fxActivityRecord";
</style>
